import React, { useState } from 'react';
import { useLocation } from 'react-router-dom';
import { Input, Button, List, Card, Empty } from 'antd';

const { TextArea } = Input;

const ChatPage = () => {
  const { state } = useLocation();
  const worker = state?.worker;

  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  if (!worker) {
    return <div>没有找到该工作者的信息</div>;
  }

  const handleSend = () => {
    if (newMessage.trim() === '') {
      return;
    }
    const newMessages = [...messages, { sender: '你', content: newMessage }];
    setMessages(newMessages);
    setNewMessage('');
  };

  return (
    <Card 
      title={`与 ${worker.name} 聊天`} 
      style={{ margin: '0 auto', marginTop: 50 }}
    >
      <div style={{ maxHeight: 400, overflowY: 'auto', marginBottom: 20 }}>
        {messages.length === 0 ? (
          <Empty description="快来联系一下对方吧" />
        ) : (
          <List
            dataSource={messages}
            renderItem={item => (
              <List.Item>
                <Card style={{ width: '100%' }}>
                  <strong>{item.sender}:</strong> {item.content}
                </Card>
              </List.Item>
            )}
          />
        )}
      </div>
      <TextArea
        rows={4}
        value={newMessage}
        onChange={e => setNewMessage(e.target.value)}
        placeholder="输入消息..."
      />
      <Button type="primary" onClick={handleSend} style={{ marginTop: 10 }}>
        发送
      </Button>
    </Card>
  );
};

export default ChatPage;
